{% extends 'layout.html' %}

{% block body %}
    <div class="" style="margin:5px;">
    <a href="{{ url_for('image.upload') }}" class="btn btn-primary">上传</a>
    </div>
    <div class="row">
    {% for img in images %}
        <div class="col-4 col-sm-4">
            <div class="card" style="">
                <img class="card-img-top" src="http://image.fangshiyue.com/{{ img.key }}">
                <div class="card-body">
                    <h5 class="card-title">{{ img.name }}.{{ img.ext }}</h5>
                    <button type="button" class="btn btn-danger" data-toggle="modal" data-id="{{ img.id }}" data-title="{{ img.name }}" data-target="#deleteModal">删除</button>
                </div>
            </div>
        </div>
    {% endfor %}
    </div>
    <!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">删除</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <p>即将删除资源，你确定吗？</p>
      </div>
      <div class="modal-footer">
          <button type="button" onclick="onDelete()" class="btn btn-primary">确定</button>
          <button type="button" class="btn btn-link" data-dismiss="modal">取消</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block footer %}
    <script>
    $('#deleteModal').on('show.bs.modal', function (event) {
{#  var button = $(event.relatedTarget) // Button that triggered the modal#}
{#  var recipient = button.data('whatever') // Extract info from data-* attributes#}
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
{#  var modal = $(this)#}
{#  modal.find('.modal-title').text('New message to ' + recipient)#}
{#  modal.find('.modal-body input').val(recipient)#}
        console.log($(event.relatedTarget).data('title'));
    });

    function onDelete() {
        $('#deleteModal').modal('hide');
        $.ajax({url: '/api/image/1', type: 'DELETE'})
            .done(function (result) {})
            .fail(function (jqXHR, status, errors) {
                alert('Failed' + errors)
            })
    }
    </script>
{% endblock %}